<template>
    <div class="service_box">
        <div class="service_header">
            <div class="service_logo">
                <img v-if="userData.userId" :src="headerImageKeyMapping[userData.avatar]" alt="">
            </div>
            <div v-if="userData.userId" class="nickname">
                <span>{{userData.nickname}}</span>
                <span v-if="userData.userId" class="genderIcon" :class="{'wuman' :userData.gender == 0,'man':userData.gender == 1 }">
                    {{userData.gender == 0 ? '♀' : '♂'}}
                </span>
                <span v-if="userData.userId" @click="editUserDetail" class="updateUserMessage el-icon-setting"></span>
            </div>
            <span v-if="!userData.userId">{{linkType == 'login'? '登录 Requester' : '注册 Requester 账户' }}</span>
            <el-button type="text" class="service_swith" @click="changeEvent('local')" icon="el-icon-s-platform">本地模式</el-button>
        </div>
        <div class="service_login" v-if="!userData.userId">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content">&nbsp;</div>
                </el-col>
                <login v-if="linkType == 'login'" :changeStatus="changeStatus" :changeUserData="changeUserData"></login>
                <register v-if="linkType == 'regist'" :changeStatus="changeStatus"></register>
                <el-col :span="8">
                    <div class="grid-content">&nbsp;</div>
                </el-col>
            </el-row>
        </div>
        <project v-if="userData.userId" ref="project" :onRefresh="getProjects" :onEdit="onEdit" :onCreat="onCreat" :onDelete="onDelete"></project>
        <el-drawer title="用户信息" :wrapperClosable="false" :direction="'rtl'" destroy-on-close size="650px" :visible.sync="editBox">
            <el-tabs type="card" v-model="headerType" style="width:95%;margin:0 auto">
                <el-tab-pane label="原神" name="yuanshen">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.yuanshen" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="Hello Kitty" name="helloKitty">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.helloKitty" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="哆啦A梦" name="duolaAmeng">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.duolaAmeng" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="最终幻想" name="FF">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.FF" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="死神" name="sishen">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.sishen" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="大白" name="dabai">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.dabai" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="熊本熊" name="xiongbenxiong">
                    <div class="headerImage">
                        <div class="headerImageItem" @click="changeAvatar(item)" :class="{'active' :item.key == registForm.avatar }" v-for="item in headerImageMapping.xiongbenxiong" :key="'header' + item.key">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </el-tab-pane>

            </el-tabs>
            <el-form ref="registForm" :rules="registRules" :model="registForm" label-width="95px" style="width:95%">
                <el-form-item label="昵称 : " prop="nickname">
                    <el-input v-model="registForm.nickname" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="性别 : ">
                    <el-radio v-model="registForm.gender" label="1">男</el-radio>
                    <el-radio v-model="registForm.gender" label="0">女</el-radio>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="submit">更新信息</el-button>
                    &nbsp;&nbsp;
                    <el-button type="danger" @click="logout">退出登录</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
import { mapState } from "vuex";
import project from './project';
import login from './login';
import register from './register';

import headerImageKeyMapping from '../../assets/headerImageMapping'

export default {
    components: {
        login,
        register,
        project
    },
    props: ['changeEvent', 'onCreat', 'onEdit', 'onDelete'],
    computed: {
        ...mapState("user", {
            userData: state => state.userData,
            ip: state => state.ip,
            projects: state => state.projects,
        }),
    },
    data() {
        return {
            headerImageKeyMapping: headerImageKeyMapping,
            headerType: 'yuanshen',
            headerImageMapping: {
                yuanshen: [],
                helloKitty: [],
                duolaAmeng: [],
                FF: [],
                sishen: [],
                dabai: [],
                xiongbenxiong: [],
            },
            registForm: {
                avatar: '',
                gender: '0',
                nickname: '',
            },
            registRules: {
                nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
            },
            editBox: false,
            title: '登录 Requester',
            linkType: 'login',
        }
    },
    mounted() {
        if (this.$refs.project) {
            this.$refs.project.setData(this.projects);
        };

        for (const key in this.headerImageKeyMapping) {
            if (this.headerImageKeyMapping.hasOwnProperty(key)) {
                const element = this.headerImageKeyMapping[key];
                var keyString = key.split('-');
                this.headerImageMapping[keyString[0]].push({
                    key: key,
                    img: element,
                });
            }
        };
    },
    methods: {
        changeAvatar(item) {
            this.registForm.avatar = item.key;
        },
        changeStatus(type) {
            this.linkType = type;
        },
        changeUserData(data, ip) {
            this.$store.dispatch('user/setUserData', data);
            this.$store.dispatch('user/setip', ip);
            this.title = data.username + '<span class="genderIcon ' + (data.gender == 0 ? 'wuman' : 'man') + '">' + (data.gender == 0 ? '♀' : '♂') + '</span>';
            this.getProjects();
        },
        submit() {
            var ans = this.$confirm('是否更新用户信息？');
            if (ans) {
                window.action.updateMessage(this.registForm, (res) => {
                    if (res) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        this.$store.dispatch('user/updateUserMessage', {
                            gender: this.registForm.gender,
                            avatar: this.registForm.avatar,
                            nickname: this.registForm.nickname,
                        });
                        this.getProjects();
                        this.editBox = false;
                    };
                });
            };
        },
        editUserDetail() {

            this.editBox = true;
            var _data = JSON.parse(JSON.stringify(this.userData));
            var key = _data.avatar.split('-');
            this.headerType = key[0];
            // console.log(key[0]);
            this.registForm = {
                gender: _data.gender,
                avatar: _data.avatar,
                nickname: _data.nickname
            };
        },
        logout() {
            this.editBox = false;
            this.$store.dispatch('user/setUserData', {});
            this.$store.dispatch('user/setip', '');
            this.$message({
                message: '已经退出登录',
                type: 'success'
            });


            this.$electron.ipcRenderer.send('close-service-window');
        },
        getProjects() {
            window.action.getUserProject((res) => {
                this.$refs.project.setData(res);
                this.$store.dispatch('user/setUserProjects', res);
            })
        },
    },
}
</script>